
		  // rem适配原理
		  (function () {
			var everywidth = document.documentElement.clientWidth / 16;
			var styleN = document.createElement("style");
			styleN.innerHTML = "html{font-size:" + everywidth + "px  }";
			document.head.appendChild(styleN);
})();

window.onload = function () {
	changeInput();
	changeMenu();
	navslider();
	slider();
	tab();
	
}

//input内容框的背景换色
function changeInput(){		
var inp = document.querySelector(" .header_bottom input[type='text']");
// console.log(inp);
inp.addEventListener("touchstart", function (e) {
	this.focus();
	this.style.background = "#fff";
	e.stopPropagation();//阻止事件冒泡
})
document.addEventListener("touchstart", function (e) {
	inp.blur();
	inp.style.background = "#999";
	
})
}

// 点击切换 input 失去焦点
function changeMenu() {
	var menuBtn = document.querySelector(".menuBtn");
	var menu = document.querySelector(".menu");
	menuBtn.addEventListener("touchstart", function (e) {
		var changeclassname = this.className.split(" ");
		if (changeclassname[1]=="menuopen") {
			this.classList.replace("menuopen", "menucolse")
			menu.style.visibility=" visible";
				
		} else {
			this.classList.replace("menucolse", "menuopen")
			menu.style.visibility=" hidden";
		}
		e.stopPropagation();
	})
	menu.addEventListener("touchstart", function (e) {
		menu.style.visibility = " visible";
		e.stopPropagation();
	})
	document.addEventListener("touchstart", function (e) {
		menuBtn.classList.replace("menucolse", "menuopen")
		menu.style.visibility=" hidden";
	})
}


//滑动切换
function navslider(){
var navs = document.querySelector(".navs");
var navs_list = document.querySelector(".navs_list");
	var startX = 0;
	var allX = 0;
	var range = 80;

// 思路 1. 首先获取 移动的距离
	// 2.添加一个全局变量  记录每次移动的距离和
	navs_list.addEventListener("touchstart", function (e) {
		startX = e.changedTouches[0].clientX;

	})
	navs_list.addEventListener("touchmove", function (e) {
		var  moveX = e.changedTouches[0].clientX - startX;
		var translatex = allX + moveX;
		// 添加一个50px的限制区间

		var maxleft = this.offsetWidth - navs.offsetWidth+range;//宽度差加range
		if (translatex>range) {
			translatex = range;
		} else if (translatex < -maxleft) {
			//注意左移加负号
			translatex = -maxleft;
		}
		this.style.transform = `translateX(${translatex}px)`;

	})
	navs_list.addEventListener("touchend", function (e) {
		var everymovex = e.changedTouches[0].clientX - startX;
		allX = allX + everymovex;  //记录总的移动距离
		// console.log(allX);
		if (allX>range) {
			allX = 0;//设置记录总的移动距离为0
			this.style.transition = "all 500ms";
			this.style.transform = `translateX(${allX}px)`;

		} else if (allX<-(this.offsetWidth - navs.offsetWidth)) {
			allX = -(this.offsetWidth - navs.offsetWidth);
			this.style.transition = "all 500ms";
			this.style.transform = `translateX(${allX}px)`;

		}

	})

	
// 添加一个点击切换的事件	
	for (var i = 0; i < navs_list.children.length; i++){
		var flag = true;
		navs_list.children[i].addEventListener("touchmove", function () {
			if (flag) {
				flag = false;
			}
		})
		navs_list.children[i].addEventListener("touchend", function () {
			if (flag) {
				for (var i = 0; i < navs_list.children.length; i++){
					navs_list.children[i].className = "";
				}
				this.classList.add("active");
			}
			flag = true;
		})
	}
	


}



// 轮播图开始
function slider() {
	var banner = document.querySelector(".banner");
	var ul = banner.children[0];
	var ol = banner.children[1];
	var bannerWidth = banner.offsetWidth;
	var num = 0;
	var StartX = 0;
	var moveX = 0;
	var timer;
	var flag = false;
	setTimer();
	// 	定时器自动轮播
	function setTimer() {
		timer = setInterval(function () {
			num++;
			var translatex = -num * bannerWidth;
			ul.style.transition="all 0.5s"
			ul.style.transform=`translateX(${translatex}px)`
		},2000)
	
	}
	
	// 小圆点动态的创建
	for (var i = 0; i < ul.children.length-2; i++){	
		var olLi = document.createElement("li");
		ol.appendChild(olLi);
		ol.children[0].classList.add("current");
		
	}
// 当动画完成之后
	ul.addEventListener("transitionend", function () {
		if (num>(ol.children.length-1)) {
			num = 0;
		var translatex = -num * bannerWidth;
			ul.style.transition = "none";
		ul.style.transform=`translateX(${translatex}px)`
		}
		if (num < 0) {
			num = 4;
			var translatex = -num * bannerWidth;
			ul.style.transition = "none";
		ul.style.transform=`translateX(${translatex}px)`
		}
		ol.querySelector(".current").classList.remove("current");
		ol.children[num].classList.add("current");
	})
// 滑动
	ul.addEventListener("touchstart", function (e) {
		clearInterval(timer);
		StartX = e.changedTouches[0].clientX;
	})
	ul.addEventListener("touchmove", function (e) {
		moveX = e.changedTouches[0].clientX - StartX;
		var translatex = -num * bannerWidth + moveX;
		ul.style.transform = `translateX(${translatex}px)`
		ul.style.transition = "none";
		flag = true;
	})
	ul.addEventListener("touchend", function (e) {
		if (flag) {
			
	
		if (Math.abs(moveX) > (bannerWidth / 6)) {
			moveX > 0 ? num-- : num++;
			var translatex = -num * bannerWidth;
		ul.style.transform = `translateX(${translatex}px)`
		ul.style.transition = "all 0.3s";
		} else {
			var translatex = -num * bannerWidth;
		ul.style.transform = `translateX(${translatex}px)`
		ul.style.transition = "all 0.3s";
			}
			flag = false;
		} 
		setTimer();
		
	})
	
}
	

// tab 中loading图滑动
function tab() {
	var tabwrap = document.querySelectorAll(".tab_wrap");
	var tablist = document.querySelector(".tab_list");
	var tablistWidth = tablist.offsetWidth;
	var startX = 0;
	var startY = 0;
	

	for (var i = 0; i < tabwrap.length; i++){
		move(tabwrap);
	}
	function move(tabwrap) {
		var tab_nav = document.querySelector(".tab_nav");
		var load = true;
		var timer;
		var index = 0;
		var num = 1;
		var a = 0;
		var a_tab = tab_nav.querySelector("a");
		var spans = tab_nav.querySelectorAll("span");
		var a_tabWidth = a_tab.offsetWidth;	
		var tab_loadings=document.querySelectorAll(".tab_loading")
		tabwrap[i].style.transform = "translate(" + -num*tablistWidth + "px)";
		tabwrap[i].addEventListener("touchstart", function (e) {
			if (load) {
				startX = e.changedTouches[0].clientX;
				startY = e.changedTouches[0].clientY;
			}
	})
	
	tabwrap[i].addEventListener("touchmove", function (e) {
		if (load) {
		var moveX = e.changedTouches[0].clientX - startX;
		var translatex = -tablistWidth *num + moveX;
		this.style.transform=`translate(${translatex}px)`
		this.style.transition = "none";
		}
	})
		tabwrap[i].addEventListener("touchend", function (e) {
			if (load) {
				var moveX = e.changedTouches[0].clientX - startX;
				var moveY = e.changedTouches[0].clientY - startY;
				console.log(moveY);
				console.log(moveX);
				if (Math.abs(moveX)>Math.abs(moveY)) {
					
				if (Math.abs(moveX) > tablistWidth / 2) {
					a = num;
					moveX < 0 ? num++ : num--;
					var translatex = -tablistWidth * num;
					this.style.transform = `translateX(${translatex}px)`
					this.style.transition = "all 0.3s";
					load = false;
					this.addEventListener("transitionend", function () {
						for (var i = 0; i < tab_loadings.length; i++) {
							tab_loadings[i].style.opacity = "1";
						}
						that = this;
						//如果这个为loading  偶数是loading
						if (num % 2 == 0) {
							clearTimeout(timer)
							timer = setTimeout(function () {
								if (a > num) {
									num--;
								} else {
									num++;
								}
								var translatex = -tablistWidth * num;
								that.style.transform = `translate(${translatex}px)`;
								that.style.transition = "all 0.3s";
								
							}, 1000)
							load = true;
						} else {
							// console.log(num);
							if (a<num) {
							index=(--num)/2;
							} else {
							index=(++num)/2;
							}
							for (var i = 0; i < spans.length;i++){
							spans[i].style.left = `${index * a_tabWidth}px`;
								spans[i].style.transition = "all 0.2s";
								
							}
						}
				
				})
					
				} else {
					var translatex = -tablistWidth * num;
					this.style.transform = `translate(${translatex}px)`
					this.style.transition = "all 0.3s";
				}
				}
				
			}
	})
		
}

}
